<template>
  <div class="iMenu">
    <a-menu
      v-model="activeSelectKey"
      mode="inline"
      theme="light"
      :inline-collapsed="collapsed"
    >
      <a-menu-item
        v-for="(item, index) in menuRoutes"
        :key="index"
        @click="goRouter(item,index)"
      >
        <!-- <router-link :to="item.path" replace>
        <a-icon :type="item.meta.icon" /> -->
        <span class="anticon">
          <img :src="item.meta.iconSelect" class="imgSrc" v-if="selectedIndex===index"/>
          <img :src="item.meta.icon" class="imgSrc" v-else/>
        </span>
        <span :title="item.name">{{ item.name }}</span>
        <div v-if="(item.name === '待办中心' || item.name === 'toDoPage') && todoNum > 0" class="todo-num">{{todoNum}}</div>
        <!-- </router-link> -->
      </a-menu-item>
    </a-menu>
  </div>
</template>
<script>
export default {
  name: "iMenu",
  data() {
    return {
      activeSelectKey: [],
      selectedIndex:  -1,
    };
  },
  props: {
    collapsed: {
      type: Boolean,
      default: false
    },
    menuRoutes: {
      type: Array
    },
    selectedKey: {
      type: Array,
      default: function() {
        return [];
      }
    },
    todoNum: {
      type: Number,
      default: 0
    }
  },
  watch: {
    selectedKey(val, oldVal) {
      this.selectedIndex = val[0]
      this.activeSelectKey = val;
    }
  },
  methods: {
    goRouter(item,index) {
      this.selectedIndex = index
      // debugger
      if (this.$route.name === "编辑项目") {
        this.$router.push({
          path: `/single/${item.path}`
        });
      } else if (this.$route.name === "创建项目") {
        this.$router.push({
          path: `/${item.path}`
        });
      } else if (this.$route.name === "项目团队签审流程") {
        this.$router.push({
          path: `/single/${item.path}`
        });
      } else if (this.$route.name === "评审流程" || this.$route.name === "修改" || this.$route.name === "修改完善" || this.$route.name === "自检人审阅") {
        this.$router.push({
          path: `/single/${item.path}`
        });
      } else if (this.$route.name === "编辑任务书" || this.$route.name === '任务书主页面') {
        this.$router.push({
          path: `/single/${item.path}`
        });
      } else if (this.$route.name === "创建变更" || this.$route.name === '编辑变更' || this.$route.name === '查看变更' || this.$route.name === '变更处理') {
        this.$router.push({
          path: `/single/${item.path}`
        });
      } else if (this.$route.name === "查看交付物") {
        this.$router.push({
          path: `/single/${item.path}`
        });
      } else if (this.$route.name === "文档签审") {
        this.$router.push({
          path: `/single/${item.path}`
        });
      } else if (this.$route.name === "创建问题" || this.$route.name === '查看问题'|| this.$route.name === '修改') {
        this.$router.push({
          path: `/single/${item.path}`
        });   
      } else if (this.$route.name === "问题流程") {
        this.$router.push({
          path: `/single/${item.path}`
        });   
      } else if (this.$route.name === "项目风险") {
        this.$router.push({
          path: `/single/${item.path}`
        });
      } else if (this.$route.name === "需求(RM)") {
        this.$router.push({
          path: `/single/${item.path}`
        });
      }else if (this.$route.name === "查看需求(RM)") {
        this.$router.push({
          path: `/single/${item.path}`
        });
      }else if (this.$route.name === "创建风险") {
        this.$router.push({
          path: `/single/${item.path}`
        });
      } else if (this.$route.name === "查看风险") {
        this.$router.push({
          path: `/single/${item.path}`
        });
      } else if (this.$route.name === "风险流程") {
        this.$router.push({
          path: `/single/${item.path}`
        });
      }else if (this.$route.name === "需求任务单流程") {
        this.$router.push({
          path: `/single/${item.path}`
        });
      }else if (this.$route.name === "子规划流程") {
        this.$router.push({
          path: `/single/${item.path}`
        });
      }else if (this.$route.name === "修改") {
        this.$router.push({
          path: `/single/${item.path}`
        });
      } else if (this.$route.name === "仿真管理") {
      this.$router.push({
        path: `/single/${item.path}`
        });
      } else if (this.$route.name === "创建委托书" ||this.$route.name === "编辑委托书" ||this.$route.name === "查看委托书" ) {
      this.$router.push({
         path: `/single/${item.path}`
        });
      } else if (this.$route.name === "启动委托书签审" || this.$route.name === "仿真委托书流程"  ||this.$route.name === "提交废弃需求" ||this.$route.name === "提交仿真需求" ) {
      this.$router.push({
         path: `/single/${item.path}`
        });
      } else if (this.$route.name === "委托书废弃流程") {
      this.$router.push({
        path: `/single/${item.path}`
      });
      } else if (this.$route.name === "创建评审") {
        this.$router.push({
          path: `/single/${item.path}`
        });
      } else if (this.$route.name === "查看评审") {
        this.$router.push({
          path: `/single/${item.path}`
        });
      } else if (this.$route.name === "创建验收表" || this.$route.name === "编辑验收表" || this.$route.name === "查看验收表" || this.$route.name === "验收表审批流程" ) {
        this.$router.push({
          path: `/single/${item.path}`
        });
      } else if (this.$route.name === "创建任务书" ) {
        this.$router.push({
          path: `/single/${item.path}`
        });
      }  else if (this.$route.path.indexOf("projectPlanningDoc") > -1) {
        this.$router.push({
          path: `/${item.path}`
        });
      } else {
        let query = {}
        if(item.name == '团队'){
          query.oid = this.$route.query.oid
        }
        this.$router.push({
          path: item.path,
          query
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.iMenu {
  /deep/ .ant-menu {
    .ant-menu-item-selected::after {
      right: auto;
      left: 0;
      // border-right: 4px solid #386bd7;
    }
  }
  .imgSrc{
    width: 14px;
    height: 14px;
    margin-right: 8px;
    margin-top: -4px;
  }
  .menu-box{
    position: relative;
  }
  .todo-num{
    min-width: 18px;
    height: 18px;
    border-radius: 100px;
    background-color: #f5222d;
    margin: -15px 0px 0px 5px;
    padding: 0px 3px 0px 3px;
    line-height: 18px;
    color: #ffffff;
    font-size: 12px;
    position: absolute;
    top: 18px;
    right: 18px;
    text-align: center;
  }
}
</style>
<style scoped>
.ant-menu-vertical .ant-menu-item::after,
.ant-menu-vertical-left .ant-menu-item::after,
.ant-menu-vertical-right .ant-menu-item::after,
.ant-menu-inline .ant-menu-item::after {
  right: auto;
  left: 0;
}
</style>